<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button v-on:click="hello('hello')">hello</button>
    <button @click="hello('world')">world</button>
    <button @click="num++">数据</button>{{num}}

    <!-- 不让事件传播  .stop
          禁止默认a标签事件.prevent 阻止默认事件
          .slef  必须要自身触发， 不会参与传播
          .once 事件只会触发一次
   -->

    <div @click.once="hello('1')" style="background: red;width: 800px;height: 500px;padding: 50px;">
      1
      <div @click.stop="hello('2')" style="background: blue;width: 400px;height: 200px;padding: 50px;">
        2
        <a @click.stop.prevent="hello('3')" style="background: yellow;width: 200px;height: 100px;display: block;padding: 50px;" href="http://www.baidu.com">3</a>
      </div> 
    </div>


    <input  v-on:keyup.ctrl="hello('space')">

  </div>
</body>
<script src="/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
  el: '#app',
  data: {
    num:0
  },
  methods: {
    hello(str) {
    	alert(str)
    }
  }
}) 

/*
v-on 用于绑定事件  

语法 v-on:事件名  

简写方式 v-on:click --->  @click

只能调用vue中的函数和数据
*/

 
</script>
</html>